<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <title>eachgo管理-新抽奖</title>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/css.css">

    <script src="./js/jquery-2.1.4.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="js/js.js"></script>

</head>
<body>

<!-- [if lt IE 9]>
<script src="../js/html5shiv.min.js"></script>
<script src="../js/respond.min.js"></script>
<!-- [endif] -->

<div class="container">
    <!--header-div start-->
    <div class="row" style="margin: 0">
        <div class="col-sm-2 col-lg-2" style="padding:0;">
            <img src="img/logo.png" style="height:58px;width:auto;margin: 30px 30px;">
        </div>
        <div class="col-sm-2 col-lg-2">
            <h3 style="margin: 60px 0 0 0">后台管理系统</h3>
        </div>
    </div>
    <!--header-div end-->

    <!--body-div start-->
    <div class="row" style="margin: 0">
        <div class="col-sm-12 col-lg-12" style="background-color: #00cebc;">
            <div style="padding-top: 10px;">
                <span style="font-size: 16px">&nbsp;工号201310414325433</span>
                <span style="margin-left: 50px;"><a href="#" style="color: #000;font-size: 16px;">退出登录</a></span>
                <span class="time pull-right" style="font-size: 16px;"></span>
            </div>

            <div class="row" style="margin: 0">
                <!--leftbar start-->
                <div id="leftbar">
                    <div class="text-center"><h4>欢迎登录Eachgo后台管理系统</h4></div>
                    <div style="background-color: #a2dae0;margin: 0 10px 10px 10px;padding: 1px 0;">
                        <div class="panel-group" id="accordion">
                            <div class="panel" style="margin: 10px;">
                                <button class="btn btn-lg btn-block btn-default side-button" data-parent="#accordion" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                    仓库管理
                                </button>
                                <div id="collapseOne" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul>
                                            <li>1</li>
                                            <li>2</li>
                                            <li>3</li>
                                            <li>4</li>
                                            <li>5</li>
                                            <li>6</li>
                                            <li>7</li>
                                            <li>8</li>
                                            <li>9</li>
                                            <li>10</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="panel" style="margin: 10px;">
                                <button class="btn btn-lg btn-block btn-default side-button" data-parent="#accordion" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    商品管理
                                </button>
                                <div id="collapseTwo" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul>
                                            <li>1</li>
                                            <li>2</li>
                                            <li>3</li>
                                            <li>4</li>
                                            <li>5</li>
                                            <li>6</li>
                                            <li>7</li>
                                            <li>8</li>
                                            <li>9</li>
                                            <li>10</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="panel" style="margin: 10px;">
                                <button class="btn btn-lg btn-block btn-default side-button" data-parent="#accordion" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    拼购管理
                                </button>
                                <div id="collapseThree" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul>
                                            <li>1</li>
                                            <li>2</li>
                                            <li>3</li>
                                            <li>4</li>
                                            <li>5</li>
                                            <li>6</li>
                                            <li>7</li>
                                            <li>8</li>
                                            <li>9</li>
                                            <li>10</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="panel" style="margin: 10px;">
                                <button class="btn btn-lg btn-block btn-default side-button" data-parent="#accordion" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                    订单管理
                                </button>
                                <div id="collapseFour" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul>
                                            <li>1</li>
                                            <li>2</li>
                                            <li>3</li>
                                            <li>4</li>
                                            <li>5</li>
                                            <li>6</li>
                                            <li>7</li>
                                            <li>8</li>
                                            <li>9</li>
                                            <li>10</li>
                                        </ul>
                                    </div>
                                </div>                            </div>
                            <div class="panel" style="margin: 10px;">
                                <button class="btn btn-lg btn-block btn-default side-button" data-parent="#accordion" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                    商品评价管理
                                </button>
                                <div id="collapseFive" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul>
                                            <li>1</li>
                                            <li>2</li>
                                            <li>3</li>
                                            <li>4</li>
                                            <li>5</li>
                                            <li>6</li>
                                            <li>7</li>
                                            <li>8</li>
                                            <li>9</li>
                                            <li>10</li>
                                        </ul>
                                    </div>
                                </div>                            </div>
                            <div class="panel" style="margin: 10px;">
                                <button class="btn btn-lg btn-block btn-default side-button" data-parent="#accordion" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                                    高校代理管理
                                </button>
                                <div id="collapseSix" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul>
                                            <li>1</li>
                                            <li>2</li>
                                            <li>3</li>
                                            <li>4</li>
                                            <li>5</li>
                                            <li>6</li>
                                            <li>7</li>
                                            <li>8</li>
                                            <li>9</li>
                                            <li>10</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="panel" style="margin: 10px;">
                                <button class="btn btn-lg btn-block btn-default side-button" data-parent="#accordion" data-toggle="collapse" data-target="#collapseSeven" aria-expanded="true" aria-controls="collapseSeven">
                                    管理员帐户
                                </button>
                                <div id="collapseSeven" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul>
                                            <li>1</li>
                                            <li>2</li>
                                            <li>3</li>
                                            <li>4</li>
                                            <li>5</li>
                                            <li>6</li>
                                            <li>7</li>
                                            <li>8</li>
                                            <li>9</li>
                                            <li>10</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="panel" style="margin: 10px;">
                                <button class="btn btn-lg btn-block btn-default side-button" data-parent="#accordion" data-toggle="collapse" data-target="#collapseEight" aria-expanded="true" aria-controls="collapseEight">
                                    页面广告管理
                                </button>
                                <div id="collapseEight" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul>
                                            <li>1</li>
                                            <li>2</li>
                                            <li>3</li>
                                            <li>4</li>
                                            <li>5</li>
                                            <li>6</li>
                                            <li>7</li>
                                            <li>8</li>
                                            <li>9</li>
                                            <li>10</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="panel" style="margin: 10px;">
                                <button class="btn btn-lg btn-block btn-default side-button" data-parent="#accordion" data-toggle="collapse" data-target="#collapseNine" aria-expanded="true" aria-controls="collapseNine">
                                    用户管理
                                </button>
                                <div id="collapseNine" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul>
                                            <li>1</li>
                                            <li>2</li>
                                            <li>3</li>
                                            <li>4</li>
                                            <li>5</li>
                                            <li>6</li>
                                            <li>7</li>
                                            <li>8</li>
                                            <li>9</li>
                                            <li>10</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--leftbar end-->

                <!--rightbar start-->
                <div id="rightbar">
                    <div class="h4" style="margin-bottom: 0">
                        <span>当前位置：</span>
                        <ol class="breadcrumb" style="display: inline;padding-top: 0;padding-bottom: 0">
                            <li><a href="#">抽奖管理</a></li>
                            <li class="active">发布新抽奖</li>
                        </ol>
                    </div>
                    <hr style="margin-top: 10px">
                    <div style="margin: 0 40px">
                        <div style="margin-bottom: 0">
                            <form class="form-inline" action="#" method="post">
                                <label>商品检索:</label>
                                <select class="form-control">
                                    <option selected>一级分类</option>
                                </select>
                                <span>-</span>
                                <select class="form-control">
                                    <option selected>二级分类</option>
                                </select>
                                <span>-</span>
                                <select class="form-control">
                                    <option selected>品牌</option>
                                </select>
                                <span>-</span>
                                <select class="form-control">
                                    <option selected>型号</option>
                                </select>
                            </form>
                        </div>
                        <div style="margin-top: 20px">
                            <table class="table text-center" border="1">
                                <thead>
                                <tr>
                                    <td>商品名称</td>
                                    <td>商品图片</td>
                                    <td>商品描述</td>
                                    <td>拼购单价</td>
                                    <td>销售价格</td>
                                    <td>库存</td>
                                    <td>状态</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>小米2</td>
                                    <td>
                                        <img src="">我是小米2
                                    </td>
                                    <td>3G内存 808像素</td>
                                    <td>1.00</td>
                                    <td>1200.00</td>
                                    <td>100</td>
                                    <td>未在抽</td>
                                </tr>
                                <tr>
                                    <td>小米2</td>
                                    <td>
                                        <img src="">我是小米2
                                    </td>
                                    <td>3G内存 808像素</td>
                                    <td>1.00</td>
                                    <td>1200.00</td>
                                    <td>100</td>
                                    <td>未在抽</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div>
                            <form method="post" action="#" name="" enctype="multipart/form-data">
                                <div style="width: 45%;float: left">
                                    <div class="form-group">
                                        <label class="control-label">拼购标题</label>
                                        <textarea class="form-control" rows="4"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">商品名称</label>
                                        <input type="text" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">人均支付</label>
                                        <select class="form-control">
                                            <option>1元</option>
                                            <option>2元</option>
                                            <option>5元</option>
                                            <option>10元</option>
                                        </select>
                                    </div>
                                </div>
                                <div style="width: 45%;float: right">
                                    <div class="form-group">
                                        <label>商品图片</label>
                                        <div>
                                            <!-- todo: 解决多图片上传，预览 -->
                                            <div id="prev"></div>
                                            <!--<div style="margin-top: 12px;">-->
                                                <input type="file" multiple>
                                            <!--</div>-->
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" style="font-size: 17px;">高校独有&nbsp;&nbsp;</label>
                                        <input type="checkbox" value=""><br>
                                        <div style="margin-top: 20px;">
                                            <form class="form-inline" action="#" method="post">
                                                <select>
                                                    <option selected>一级分类</option>
                                                </select>
                                                <span>-</span>
                                                <select>
                                                    <option selected>二级分类</option>
                                                </select>
                                                <span>-</span>
                                                <select>
                                                    <option selected>品牌</option>
                                                </select>
                                                <span>-</span>
                                                <select>
                                                    <option selected>型号</option>
                                                </select>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">拼购总期数</label>
                                        <input type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="text-center" style="margin-bottom: 20px;clear: both">
                                    <input type="submit" class="btn btn-lg" value="确认并发布">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!--rightbar end-->
            </div>
        </div>
    </div>
    <!--body-div end-->

    <!--footer-div start-->
    <div class="row"  style="margin: 0">
        <div class="col-sm-12 col-lg-12 text-center" style="padding: 0;">
            <h3>Powered by TNT</h3>
            <span class="h3 pull-right">ID:12323434</span>
        </div>
    </div>
    <!--footer-div end-->

</div>

<script>
    function previewB(file,$obj) {
        var reader = new FileReader();//创建FileReader对象
        reader.onload = function(e) {
            var $img = $('<img>').attr("src", e.target.result);
            $obj.empty().append($img);
        }
        reader.readAsDataURL(file);
    }

    $('[type=file]').change(function(e) {
        var $obj = $(document.getElementById(e.target.className));
        var file = e.target.files[0],//事件目标
                val  = $(this).val(),
                reg  = /\.(png|jpg|gif|bmp|jpeg)$/;
        if( reg.test(val) ){
            previewB(file,$obj);
        }else{
            alert('选择正确格式的图片');
        }
    })
</script>
</body>
</html>